<template>
  <div class="sku-box">
    <van-action-sheet :show="showSkuSelect" @close="closeSkuPanle">
      <!-- <div class="height-200"></div> -->
      <div class="sku-panle pad-15" v-if="!loading">
        <!-- 商品图片 价格 库存-->
        <div class="goods-info-box flex pad-b-15 border-b">
          <div class="flex">
            <div class="goods-img-box">
              <img
                v-if="skuImage"
                class="border-radius-5 width-98 height-98"
                :src="skuImage + '?imageView2/1/w/200/h/200'"
                mode="aspectFill"
                alt=""
                @click="previewImage(skuImage)"
              >
            </div>
            <div class="flex-col pad-t-5 pad-l-12">
              <span v-if="getRoleType !== 2" class="font-red font-14">
                ¥<label class="font-20">{{ goodsData.skuFlag > 0 ? skuPrice : goodsData.specimenPrice }}</label>
              </span>
              <span v-else class="font-red font-14">¥0</span>
              <span class="font-color-6 font-12 mar-t-18"  v-if="goodsData.goodsType === 30">库存: {{ stockSkuNum ? stockSkuNum : goodsData.remainStock }}{{ qty }}</span>
              <span class="font-color-6 font-12" v-if="skuPropList.length !== 0">{{ skuDetail ? skuDetail : '请选择规格' }}</span>
            </div>
          </div>
          <div @click="closeSkuPanle">
            <van-icon name="cross" size="19" color="#333333"/>
          </div>
        </div>
        <!-- 选择规格 -->
        <div v-if="skuPropList.length" class="border-b pad-b-15 pad-t-5">
          <scroll-view scroll-y="" class="clearfix scroll-sky">
            <div class="pad-t-8 pad-b-8" v-for="(item, index) in skuPropList" :key="index">
              <div class="font-w font-14 pad-b-7 font-color-3">{{item['skuPropName']}}</div>
              <div class="flex flex-wrap" >
                <label class="sku-label mar-r-25 mar-t-5" v-for="(skuPropValue, indexValue) in item.skuPropValueList"
                :key="indexValue" :class="{'sel-prop-value' : skuPropValue.showFlag === 1,'dissel-pro-value': skuPropValue.showFlag === 0}">
                  <div class="align-c font-13 pad-t-5 pad-b-5 pad-l-10 pad-r-10" @click="selSkuPropValue(index, skuPropValue.skuPropValueId)" v-if="skuPropValue.showFlag !== 2">
                    {{skuPropValue.skuPropValue}}
                  </div>
                  <div v-else class="sku-prop-value align-c disable-prop-value pad-t-5 pad-b-5 pad-l-10 pad-r-10" :key="indexValue">
                    {{ skuPropValue.skuPropValue }}
                  </div>
                </label>
              </div>
            </div>
          </scroll-view>
        </div>
        <!-- 购买数量 -->
        <div class="pad-b-15 mar-t-20 mar-b-10 flex flex-between">
          <div class="font-14 pad-b-12 flex flex-center">
            <span class="font-w">购买数量</span>
            <span class="font-red font-10 mar-l-5"  v-if="showLimitNum">限购{{ goodsNum }}/{{ goodsLimitNum }}</span>
          </div>
          <div>
            <van-stepper v-model="goodsNum" :max="goodsLimitNum" @change="onChangeGoodsNum"/>
          </div>
        </div>
        <!-- 底部按钮 -->
        <button
          class="add-btn flex flex-center mar-t-10"
          @click="save">
          <div>{{ cartId ? '确认修改' : '加入寄样清单' }}</div>
        </button>
      </div>
      <div v-else class="height-200 flex-col flex-center">
        <img v-if="fileSpace" :src="fileSpace + '/images/loading-icon.png'" alt="" class="width-30 height-30 loading-icon">
        <span class="font-color-6 mar-t-20">加载中......</span>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { getProjectGoodsSku, addShoppingCart, updateShoppingCart } from '@/api/shop'
export default {
  data() {
    return {
      showSkuSelect: false,
      goodsNum: 1,
      actions: [{loading: true}],
      skuPropList: [],
      SKUResult: {},
      skuArrStock: [],
      skuList: [],
      skuImage: '',
      selSkuPropValueList: [],
      values: [],
      stockSkuNum: 0,
      skuDetail: '',
      isStock: true,
      isCart: null,
      cartId: null,
      skuId: '',
      skuPrice: 0,
      cartSkuId: null,
      goodsLimitNum: null,
      goods: {},
      showLimitNum: true,
      loading: true
    }
  },
  props: {
    goodsData: {
      type: Object,
      default: {}
    },
    qty: {
      type: String,
      default: ''
    }
  },
  onShow() {
    if (this.$store.state.previewImageFlag) {
      this.$store.commit('setPreviewImageFlag', false)
      return
    }
    this.closeSkuPanle()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getProjectGoodsSku()
    },
    // 获取商品Sku信息
    getProjectGoodsSku() {
      getProjectGoodsSku({
        customerId: this.getCustomerId,
        memberId: this.getMemberId,
        goodsId: this.goodsData.goodsId,
        roleType: this.getRoleType ? this.getRoleType : '',
        microShopFlag: this.goodsData.goodsType === 30 || this.goodsData.goodsType === 31 || this.goodsData.goodsType === 32 ? 0 : 1
      }).then(res => {
        this.actions[0]['loading'] = false
        const result = res.data
        this.skuPropList = result.skuPropList
        this.skuList = result.skuList
        this.values = result.values
        this.show()
      })
    },
    showSkuPanle(isCart, cartItem) {
      this.isCart = isCart
      if (cartItem) {
        this.cartSkuId = null
        this.cartId = cartItem.cartId
        this.goodsNum = cartItem.goodsNum
        // goodsLimitNum 商品限购数量
        // this.goodsLimitNum = cartItem.goodsLimitNum
        // this.goodsLimitNum = 10
        this.cartSkuId = cartItem.skuId
      }
      // 当没有设置限购数时，可下单最大数为100
      if (!this.goodsLimitNum) {
        this.goodsLimitNum = this.goodsData.remainStock
      }
      if (!this.goodsData.specimenLimitNum) {
        this.showLimitNum = false
      } else {
        this.showLimitNum = true
        this.goodsLimitNum = this.goodsData.specimenLimitNum
        if (this.goodsNum > this.goodsLimitNum) {
          this.goodsNum = this.goodsLimitNum
        }
      }
      this.showSkuSelect = true
    },
    closeSkuPanle() {
      this.showSkuSelect = false
    },
    save() {
      if (!this.isFinishedSel()) return this.$utils.showToast({ title: '请选择商品规格' })
      if (!this.isStock) return this.$utils.showToast({ title: '您选择的商品，已售罄，请重新选择！' })
      if (this.goodsData.remainStock) {
        if (this.goodsNum > this.goodsData.remainStock) return this.$utils.showToast({ title: '您购买的商品数量，已超出库存，抱歉！' })
      }
      // console.log('stockSkuNum 111', this.stockSkuNum)
      if (this.stockSkuNum) {
        if (this.goodsNum > this.stockSkuNum) return this.$utils.showToast({ title: '您购买的商品数量，已超出库存，抱歉！' })
      }
      // let roomId = this.room_id || ''
      let skuPropValueIds = []
      this.selSkuPropValueList.forEach((item) => {
        skuPropValueIds.push(item.skuPropValueId)
      })
      if (this.isCart) {
        // console.log('购物车进入')
        this.updateShoppingCart()
      } else {
        // console.log('非购物车外进入')
        const shoppingCart = {
          customerId: this.getCustomerId,
          goodsId: this.goodsData.goodsId,
          goodsNum: this.goodsNum,
          memberId: this.getMemberId,
          goodsType: this.goodsData.goodsType,
          shoppingCartType: 6,
          roleType: this.getRoleType ? this.getRoleType : ''
        }
        if (!this.getShowBuyCard) {
          shoppingCart.customerId = this.getMemberId
        }
        if (this.goodsData.shareMemberId) {
          shoppingCart.shareMemberId = this.goodsData.shareMemberId
        }
        if (this.skuId) {
          shoppingCart.skuId = this.skuId
        }
        let that = this
        let objGoods = this.goods
        addShoppingCart(shoppingCart).then((response) => {
          // console.log('0000000000')
          // console.log(response)
          if (response.isError) return
          this.$utils.showToast({ title: '已加入寄样清单中', icon: 'success' })
          let params = {
            goodsNum: shoppingCart.goodsNum,
            goodsId: shoppingCart.goodsId,
            skuId: shoppingCart.skuId,
            sellPrice: that.skuPrice ? that.skuPrice : objGoods.price
          }
          this.$emit('finished', params)
        }).catch(() => {
        })
      }
      this.closeSkuPanle()
    },
    previewImage(current) {
      this.$pt.previewImage({
        urls: [current],
        current: current,
        success: res => {
          this.$store.commit('setPreviewImageFlag', true)
        }
      })
    },
    updateShoppingCart() {
      // 更新商品数量
      const shoppingCart = {
        cartId: this.cartId,
        goodsNum: this.goodsNum
      }
      // 多规格更新购物车数据
      if (this.goodsData.skuFlag === 1) {
        shoppingCart.skuId = this.skuId
      }
      let objGoods = this.goods
      updateShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return false
        console.log('更新购物车')
        let params = {
          goodsNum: shoppingCart.goodsNum,
          goodsId: this.goodsData.goodsId,
          skuId: shoppingCart.skuId,
          sellPrice: this.skuPrice ? this.skuPrice : objGoods.price
        }
        this.$emit('finished', params)
      }).catch(() => {
      })
    },
    show(goods, comissionFlag, qty, type) {
      // console.log('show 000')
      // console.log(this.skuList)
      // 初始化data
      // Object.assign(this.$data, this.$options.data())
      this.selSkuPropValueList = []
      if (this.goodsData) {
        // console.log(this.goodsData)
        // this.goods = this.goodsData
        this.qty = qty
        // 多规格
        if (this.skuPropList && this.skuList) {
          // console.log(2)
          // console.log(this.skuList)
          // 初始化selSkuPropValueList
          this.skuPropList.forEach((itemDetop, indexDetop) => {
            itemDetop.skuPropValueList.forEach((itemDetopSub, indexDetopSub) => {
              itemDetopSub.showFlag = 0
            })
            if (!this.selSkuPropValueList[indexDetop]) {
              this.selSkuPropValueList.push({})
            }
          })
        }
        // console.log(3)
        // console.log('多规格')
        let skuArrStock = []
        let skuFirstArr = []
        // console.log(this.skuList)
        skuArrStock = this.$utils.deepClone(this.skuList)
        skuArrStock.forEach((itemStock, indexStock) => {
          if (itemStock.remainStock) {
            this.skuArrStock.push(itemStock)
          }
        })
        if (this.skuArrStock.length) {
          Object.keys(this.values).forEach(itemValues => {
            if (this.skuArrStock[0].skuId === this.values[itemValues].skuId) {
              skuFirstArr = itemValues.split(',')
            }
          })
          // console.log('4-1')
          // console.log(this.skuArrStock[0].skuId)
          // console.log(skuFirstArr)
          this.skuId = this.skuArrStock[0].skuId
          // console.log(this.skuArrStock[0])
          this.skuPropList.forEach((itemDetop, indexDetop) => {
            itemDetop.skuPropValueList.forEach(itemDetopSub => {
              skuFirstArr.forEach(itemArr => {
                if (itemDetopSub.skuPropValueId === itemArr) {
                  // console.log(3333)
                  this.selSkuPropValue(indexDetop, itemArr)
                }
              })
            })
          })
          setTimeout(() => {
            // console.log(this.skuArrStock)
            // console.log(this.goods)
            this.skuImage = this.skuArrStock[0].imageUrl ? this.skuArrStock[0].imageUrl : this.goodsData.goodsImages[0]['imageUrl']
          }, 100)
        }
        // 购物车进入，处理购物车已选中的SKU项
        if (this.cartId && this.skuPropList && this.skuList) {
          // 商品数量达到限购数量
          if (this.goodsNum >= this.goodsLimitNum) {
            this.saveBtn = false
            // return
          }
          this.skuId = ''
          this.selSkuPropValueList = []
          this.skuId = this.cartSkuId
          this.skuList.forEach(skuItem => {
            if (skuItem.skuId === this.cartSkuId) {
              let selSkuPropValueCartList = []
              skuItem.skuDetailList.forEach(cartItem => {
                selSkuPropValueCartList.push({
                  skuPropValueId: cartItem.skuPropValueId
                })
              })
              // console.log('selSkuPropValueCartList')
              // console.log(selSkuPropValueCartList)
              this.selSkuPropValueList = selSkuPropValueCartList
              // 设置SKU选中
              this.setValueOn(this.selSkuPropValueList)
            }
          })
        }
      }
      // if (type) {
      //   this.buyNowBoolean = true
      // }
      // if (this.goods.isCart) {
      //   this.buyNowBoolean = false
      //   this.buyNowBtn = false
      // }
      // this.isGetSkuBuy = true
      // this.comissionFlag = comissionFlag
      this.skuImage = this.goodsData.goodsImages[0]['imageUrl']
      const that = this
      setTimeout(function() {
        that.loading = false
      }, 1000)
    },
    setValueOn(selSkuPropValueList) {
      this.skuPropList.forEach(itemProp => {
        itemProp.skuPropValueList.forEach(itemPropSub => {
          itemPropSub.showFlag = 0
        })
      })
      selSkuPropValueList.forEach(itemArr => {
        this.skuPropList.forEach(itemProp => {
          itemProp.skuPropValueList.forEach(itemPropSub => {
            if (itemPropSub.skuPropValueId === itemArr.skuPropValueId) {
              itemPropSub.showFlag = 1
            }
          })
        })
      })
    },
    onChangeGoodsNum(e) {
      this.goodsNum = e.mp.detail
    },
    selSkuPropValue(skuPropIndex, skuPropValueId) {
      var i = null
      var j = null
      var skuKeys = this.getObjKeys(this.values)
      for (i = 0; i < skuKeys.length; i++) {
        var skuKey = skuKeys[i] // 一条SKU信息key
        var sku = this.values[skuKey] // 一条SKU信息value
        var skuKeyAttrs = skuKey.split(',') // SKU信息key属性值数组
        skuKeyAttrs.sort(function(value1, value2) {
          return parseInt(value1) - parseInt(value2)
        })
        // 对每个SKU信息key属性值进行拆分组合
        var combArr = this.combInArray(skuKeyAttrs)
        for (j = 0; j < combArr.length; j++) {
          this.add2SKUResult(combArr[j], sku)
        }
        this.SKUResult[skuKeyAttrs.join(',')] = {
          remainStock: sku.remainStock,
          skuId: sku.skuId
        }
      }
      let dataList = []
      const colArr = ['subData', 'name']
      dataList = this.$utils.objToArr(this.SKUResult, colArr)
      // console.log(dataList)
      let showId = ''
      // 拷贝属性，使其更新
      this.selSkuPropValueList = Object.assign([], this.selSkuPropValueList)
      this.skuPropList.forEach((item, index) => {
        if (!this.selSkuPropValueList[index]) {
          this.selSkuPropValueList.push({})
        }
        if (skuPropIndex === index) {
          let otherIdData = []
          // let skuIdData = []
          if (this.selSkuPropValueList[index].skuPropValueId === skuPropValueId) {
            item.skuPropValueList.forEach((itemSub, indexSub) => {
              itemSub.showFlag = 0
              otherIdData = []
              // skuIdData = []
            })
            this.selSkuPropValueList[index].skuPropValueId = ''
          } else {
            this.selSkuPropValueList[index].skuPropValueId = skuPropValueId
            // console.log('selSkuId')
            // console.log(this.selSkuPropValueList[index].skuPropValueId)
            item.skuPropValueList.forEach((itemSub, indexSub) => {
              otherIdData = []
              // skuIdData = []
              itemSub.showFlag = 0
              if (this.selSkuPropValueList[index].skuPropValueId === itemSub.skuPropValueId) {
                showId = itemSub.skuPropValueId
                itemSub.showFlag = 1
                // sku展示库存为0的灰度展示
                // itemSub.skuPropValueId 为 选中的valueId，在 skuPropList 里
                this.skuPropList.forEach((itemOnTop, indexOnTop) => {
                  itemOnTop.skuPropValueList.forEach((itemOtherOnSub, indexOtherOnSub) => {
                    if (itemOtherOnSub.showFlag === 2) {
                      itemOtherOnSub.showFlag = 0
                    }
                  })
                })
                // console.log('itemData')
                dataList.forEach((itemData, indexData) => {
                  let len = 0
                  if (itemData.name.indexOf(',') !== -1) {
                    len = (itemData.name.split(',')).length
                    itemData.len = len
                  } else {
                    itemData.len = 1
                  }
                  if (itemData.subData.remainStock === 0 && itemData.len === this.skuPropList.length) {
                    // console.log(itemData.name)
                    otherIdData.push(itemData.name.split(','))
                  }
                })
              }
            })
          }
        }
      })
      // 已选中的数据处理
      let selDataArr = [] // 已选中数组
      let selDataStr = '' // 已选中字符串
      let stockNoneValueId = [] // 库存为空相关联的ID值
      this.selSkuPropValueList.forEach((item, index) => {
        if (item.skuPropValueId) {
          selDataArr.push(item.skuPropValueId)
        }
      })
      // console.log('selDataStr')
      selDataStr = selDataArr.join(',')
      // console.log(selDataStr)
      // console.log('item.name list')
      dataList.forEach((item, index) => {
        if (selDataStr !== item.name && item.name.indexOf(selDataStr) !== -1 && item.subData.remainStock === 0) {
          // console.log(item.name)
          stockNoneValueId.push(item.name.split(','))
          stockNoneValueId = [].concat.apply([], stockNoneValueId)
        }
      })
      // console.log('stockNoneValueId')
      // console.log(stockNoneValueId)
      if (stockNoneValueId.length === 0) {
        this.skuPropList.forEach((itemProp, indexProp) => {
          itemProp.skuPropValueList.forEach((itemPropSub, indexPropSub) => {
            if (itemPropSub.showFlag === 1) {
              itemPropSub.showFlag = 1
            }
            if (itemPropSub.showFlag === 2) {
              itemPropSub.showFlag = 0
            }
          })
        })
        selDataArr.forEach((itemArr, indexArr) => {
          this.skuPropList.forEach((itemProp, indexProp) => {
            itemProp.skuPropValueList.forEach((itemPropSub, indexPropSub) => {
              if (itemPropSub.skuPropValueId === itemArr) {
                itemPropSub.showFlag = 1
              }
            })
          })
        })
      } else {
        // 设置库存不足，设置不可选择
        stockNoneValueId.forEach((itemSelData, indexSel) => {
          this.skuPropList.forEach((itemProp, indexProp) => {
            itemProp.skuPropValueList.forEach((itemPropSub, indexPropSub) => {
              if (itemSelData === itemPropSub.skuPropValueId) {
                itemPropSub.showFlag = 2
              }
            })
          })
        })
        // 已选中的规格，设置选中
        if (selDataArr.length === 0) {
          this.skuPropList.forEach((itemProp, indexProp) => {
            itemProp.skuPropValueList.forEach((itemPropSub, indexPropSub) => {
              itemPropSub.showFlag = 0
              this.skuDetail = ''
              this.skuPrice = this.goods.price
              this.stockSkuNum = this.goods.remainStock
              this.skuImage = this.goods.goodsImages[0]
            })
          })
        } else {
          selDataArr.forEach((itemSelData, indexSel) => {
            this.skuPropList.forEach((itemProp, indexProp) => {
              itemProp.skuPropValueList.forEach((itemPropSub, indexPropSub) => {
                if (itemSelData === itemPropSub.skuPropValueId) {
                  itemPropSub.showFlag = 1
                }
              })
            })
          })
        }
      }
      // 读取sku价格
      if (this.isFinishedSel()) {
        this.skuList.forEach((item) => {
          let isGetSkuPrice = true
          item.skuDetailList.forEach((skuDetail, index) => {
            if (skuDetail.skuPropValueId !== this.selSkuPropValueList[index].skuPropValueId) {
              isGetSkuPrice = false
            }
          })
          if (isGetSkuPrice) {
            // console.log(item)
            this.skuPrice = item.specimenPrice
            this.skuId = item.skuId
            this.stockSkuNum = item.remainStock
            let arrDetail = item.skuDetail.split(';')
            this.skuDetail = arrDetail.join(' ')
            if (item.imageUrl) {
              this.skuImage = item.imageUrl ? item.imageUrl : this.goods.goodsImages[0]
            }
            // console.log('select true')
            // console.log(item)
            this.skuPropList.forEach((itemList, index) => {
              itemList.skuPropValueList.forEach((itemSub, indexSub) => {
                if (this.selSkuPropValueList[index].skuPropValueId === itemSub.skuPropValueId) {
                  itemSub.showFlag = 1
                }
              })
            })
            if (item.remainStock === 0) {
              // console.log('showId')
              // console.log(showId)
              this.skuPropList.forEach((itemList, index) => {
                itemList.skuPropValueList.forEach((itemSub, indexSub) => {
                  if (itemSub.showFlag === 1) {
                    itemSub.showFlag = 2
                  }
                  if (showId === itemSub.skuPropValueId) {
                    itemSub.showFlag = 1
                  }
                })
              })
              this.stockSkuNum = '0'
              this.isStock = false
              // this.$utils.showToast({ title: '您选择的商品，已售罄，请重新选择！' })
            } else {
              this.isStock = true
            }
          }
        })
      }
    },
    // 是否完成了选择规格
    isFinishedSel() {
      let isDone = true
      // console.log('this.selSkuPropValueList')
      // console.log(this.selSkuPropValueList)
      this.selSkuPropValueList.forEach((item) => {
        // console.log('item.skuPropValueId')
        // console.log(item.skuPropValueId)
        if (!item.skuPropValueId) {
          isDone = false
          return isDone
        }
      })
      return isDone
    },
    getObjKeys(obj) {
      if (obj !== Object(obj)) {
        return
      }
      var keys = []
      for (var key in obj) {
        // var m = key
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          // var n = key
          keys[keys.length] = key
        }
      }
      return keys
    },
    add2SKUResult(combArrItem, sku) {
      var key = combArrItem.join(',')
      key = this.arrangeKey(key)
      if (this.SKUResult[key]) { // SKU信息key属性·
        this.SKUResult[key].remainStock += sku.remainStock
      } else {
        this.SKUResult[key] = {
          remainStock: sku.remainStock,
          skuId: sku.skuId
        }
      }
    },
    arrangeKey(skuKey) {
      /* key由小到大排列*************************************/
      var skuKeyAttrs = skuKey.split(',') // SKU信息key属性值数组
      skuKeyAttrs.sort(function(value1, value2) {
        return parseInt(value1) - parseInt(value2)
      })
      skuKey = skuKeyAttrs[0]
      for (var m = 1; m < skuKeyAttrs.length; m++) {
        skuKey += ',' + skuKeyAttrs[m]
      }
      return skuKey
    },
    combInArray(aData) {
      if (!aData || !aData.length) {
        return []
      }
      var len = aData.length
      var aResult = []
      for (var n = 1; n < len; n++) {
        var aaFlags = this.getCombFlags(len, n)
        while (aaFlags.length) {
          var aFlag = aaFlags.shift()
          var aComb = []
          for (var i = 0; i < len; i++) {
            aFlag[i] && aComb.push(aData[i])
          }
          aResult.push(aComb)
        }
      }
      return aResult
    },
    getCombFlags(m, n) {
      if (!n || n < 1) {
        return []
      }
      var aResult = []
      var aFlag = []
      var bNext = true
      var i, j, iCnt1
      for (i = 0; i < m; i++) {
        aFlag[i] = i < n ? 1 : 0
      }
      aResult.push(aFlag.concat())
      while (bNext) {
        iCnt1 = 0
        for (i = 0; i < m - 1; i++) {
          if (aFlag[i] === 1 && aFlag[i + 1] === 0) {
            for (j = 0; j < i; j++) {
              aFlag[j] = j < iCnt1 ? 1 : 0
            }
            aFlag[i] = 0
            aFlag[i + 1] = 1
            var aTmp = aFlag.concat()
            aResult.push(aTmp)
            if (aTmp.slice(-n).join('').indexOf('0') === -1) {
              bNext = false
            }
            break
          }
          aFlag[i] === 1 && iCnt1++
        }
      }
      return aResult
    }
  }
}
</script>

<style lang="less" scoped>
.sku-box{
  /deep/ .sheet-index--van-action-sheet {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
}
  .sku-panle {
    .goods-info-box {
      justify-content: space-between;
    }
    .scroll-sky {
      max-height: 275px;
      .sku-label {
        border-radius: 4rpx;
      }
      .sel-prop-value {
        background: #7427FF;
        color: #fff;
      }
      .disable-prop-value {
        color: #d2d2d2;
        background-color: #F7F9FB;
      }
      .dissel-pro-value {
        color: #333333;
        background-color: #F7F9FB;
      }
    }
    .add-btn {
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #7427FF;
      width: 345px;
      margin: 0 auton;
      border: none;
      border-radius: 100px;
      height: 46px;
      &.disabled{
        opacity: 0.5;
      }
    }
  }
  .loading-icon {
    animation: loading 3s linear infinite normal;
  }
  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
